<template>
  <div class="header">
    <div
      class="title"
      v-for="(item, index) of navList"
      :key="item.index"
      :class="{ active: nowIndex == item.index }"
      @click="tabClick(index)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      nowIndex: 0,
      navList: [
        { index: 0, title: "推荐" },
        { index: 1, title: "即将上线" },
        { index: 2, title: "视频" },
      ],
    };
  },
  methods: {
    tabClick(index) {
      this.nowIndex = index;
      this.$root.bus.$emit("tabSwitch", index);
    },
  },
  mounted() {
    this.$root.bus.$on("pageSwitch", (index) => {
      this.nowIndex = index;
    });
  },
};
</script>
<style lang="scss" scoped>
</style>